<template>
  <div id="buymaterialsdetail">
    <Header />
    <el-breadcrumb separator=">>" style="margin-left: 20px; font-size: 15px">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item
        ><a href="/buymaterials">建材选购</a></el-breadcrumb-item
      >
      <el-breadcrumb-item><a href="/"> 建材详情</a></el-breadcrumb-item>
    </el-breadcrumb>
    <el-row>
      <el-col :span="8"
        ><div class="grid-content bg-purple" style="margin-right: 0px">
          <img
            src="../../assets/images/u14366.png"
            style="margin-left: auto; margin-right: auto"
          /></div
      ></el-col>
      <el-col :span="12"
        ><div class="grid-content bg-purple-light" style="margin-left: 0px">
          <el-row
            style="
              font-size: 20px;
              font-weight: bolder;
              color: #272727;
              border-bottom: 1px dashed rgb(109 113 116);
              height: 12%;
            "
            >预拌抹灰砂浆1车装</el-row
          >
          <el-row
            style="
              color: #3781f4;
              font-size: 28px;
              height: 15%;
              border-bottom: 1px dashed rgb(109 113 116);
              margin-top: 10px;
              font-weight: bolder;
            "
            >¥6000.00
          </el-row>
          <el-row style="height: 20%; margin-top: 30px"
            ><div id="first" v-if="radio1 == '1车装'" style="font-size: 15px">
              规格型号：DMP15
            </div>
            <div id="seccond" v-if="radio1 == '1袋装'" style="font-size: 15px">
              规格型号：DMP16
            </div>
            <el-radio-group
              v-model="radio1"
              size="medium"
              style="margin: 10px 10px 0 0"
              @change="showChange"
            >
              <el-radio-button label="1车装"></el-radio-button>
              <el-radio-button label="1袋装"></el-radio-button>
            </el-radio-group>
          </el-row>
          <el-row style="margin-top: 30px; height: 15%"
            ><el-input-number size="mini" v-model="num1"></el-input-number>
            <span style="margin-left: 20px; font-size: 14px">已售9999</span>
          </el-row>
          <el-row>
            <el-button type="primary">立即购买</el-button>
            <el-button>加入购物车</el-button>
          </el-row>
        </div></el-col
      >
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row>
      <el-col :span="7"
        ><div class="grid-content bg-purple">
          <el-row style="background-color: #f2f2f2; margin-left: 40px">
            <el-col :span="4"
              ><img
                style="height: 25px;width:25px; margin: 15px 0 15px 15px"
                src="../../assets/images/u14258.png"
            /></el-col>
            <el-col :span="20" style="font-size: 15px;margin-top: 17px;"
              >河南融昌建材有限公司</el-col
            ></el-row
          >
          <el-row  style=" margin-left: 40px;border:1px solid #ddd"><el-button style="width:50%;     margin: 15px 25%;">看看它</el-button></el-row>
          <el-row style="background-color: #f2f2f2; margin-left: 40px;margin-top:20px;">
            <el-col :span="4"
              ><img
                style="height: 25px;width:25px; margin: 15px 0 15px 15px"
                src="../../assets/images/u14520.png"
            /></el-col>
            <el-col :span="20" style="font-size: 15px;margin-top: 17px;"
              >店家推荐</el-col
            ></el-row
          >
          <el-row  style=" margin-left: 40px;border:1px solid #ddd;">
            <el-row> <el-col  :span="14"><img
                style="margin: 15px 0 15px 15px"
                src="../../assets/images/u14524.png"
            /></el-col>
            <el-col  :span="10" style="margin-top: 30%;color: #3781f4;    font-weight: bolder;">¥6000.00</el-col></el-row>
           
          <el-row style="margin-left: 15px;    font-size: 15px;"> 预拌抹灰砂浆一车装</el-row>
          </el-row>
                    <el-row  style=" margin-left: 40px;border:1px solid #ddd;">
            <el-row> <el-col  :span="14"><img
                style="margin: 15px 0 15px 15px"
                src="../../assets/images/u14524.png"
            /></el-col>
            <el-col  :span="10" style="margin-top: 30%;color: #3781f4;    font-weight: bolder;">¥6000.00</el-col></el-row>
           
          <el-row style="margin-left: 15px;    font-size: 15px;"> 预拌抹灰砂浆一车装</el-row>
          </el-row>
                    <el-row  style=" margin-left: 40px;border:1px solid #ddd;">
            <el-row> <el-col  :span="14"><img
                style="margin: 15px 0 15px 15px"
                src="../../assets/images/u14524.png"
            /></el-col>
            <el-col  :span="10" style="margin-top: 30%;color: #3781f4;    font-weight: bolder;">¥6000.00</el-col></el-row>
           
          <el-row style="margin-left: 15px;    font-size: 15px;"> 预拌抹灰砂浆一车装</el-row>
          </el-row>
         
          </div
      ></el-col>
      <el-col :span="16"
        ><div class="grid-content bg-purple-light">
          <el-row style="border:1px solid #ddd;">
            <el-col  :span="1"><img
                style="margin:0 "
                src="../../assets/images/u13577.png"
            /></el-col>
            <el-col  :span="21"  style="margin: 10px 0;">货物详情</el-col>
           
          </el-row>
          <el-row><img
                style="    margin: 20px 0; "
                src="../../assets/images/u14490.png"
            /></el-row>
          </div
      ></el-col>
        <el-col  :span="1" ></el-col>
    </el-row>
  </div>
</template>
<script>
import Header from "@/components//Header.vue";
export default {
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      radio1: "1车装",
      dialogVisible: false,
      num1: 1,
    };
  },
  components: {
    Header,
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>
<style scoped src="../../style/buymaterialsdetail.css">
</style>
